<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle" width="436px">
      <el-form
          :model="franchiseeInfo"
          :rules="rules"
          ref="addFranchiseeForm"
          label-width="80px"
      >
        <div>
          <el-form-item label="姓名：" prop="storeManagerName">
            <el-input
                size="small"
                v-model="franchiseeInfo.storeManagerName"
                style="width: 285px; height: 40px; border-radius: 4px"
                placeholder="请输入店长姓名"
            ></el-input>
          </el-form-item>

          <el-form-item label="性别：">
            <el-radio-group v-model="franchiseeInfo.gender">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="电话：" prop="phoneNum">
            <el-input
                size="small"
                v-model="franchiseeInfo.phoneNum"
                style="width: 285px; height: 40px; border-radius: 4px"
                placeholder="请输入店长电话"
            ></el-input>
          </el-form-item>
        </div>

        <el-form-item>
          <div style="margin-top: 86px">
            <el-button
                @click="_cancel"
                style="
                background-color: #f3f6fd;
                color: #303e9d;
                border-radius: 4px;
                width: 100px;
                height: 40px;
                margin-right: 22px;
              "
            >取消
            </el-button
            >
            <el-button
                @click="_submit"
                style="
                width: 100px;
                height: 40px;
                background-color: #303e9d;
                color: #ffffff;
              "
            >保存
            </el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'addStoreManager',
  data() {
    return {
      row: {},
      dialogVisible: false,
      supplierDialog: false,
      franchiseeInfo: {
        storeManagerName: '', // 店长名称
        gender: '男', // 店长性别
        phoneNum: '', // 店长手机号
      },
      brandList: [],
      recordId: '',
      supplierData: [],
      supplierList: [],
      rules: {
        storeManagerName: [
          {required: true, message: '请输入店长名称', trigger: 'blur'},
        ],
        gender: [{required: true, message: '请选择性别', trigger: 'change'}],
        phoneNum: [
          {required: true, message: '请输入联系方式', trigger: 'blur'},
        ],
      },
    }
  },
  props: {
    dialogTitle: {
      type: String,
      default: () => '',
    },
    franchiseeForm: {
      // 回显
      type: Object,
      default: () => {
      },
    },
  },
  mounted() {
  },
  methods: {
    handleOpen(row) {
      this.franchiseeInfo = this.$options.data.call(this).franchiseeInfo
      this.dialogVisible = true
      if (row) {
        for (let key in row) {
          if (this.franchiseeInfo.hasOwnProperty(key)) {
            this.franchiseeInfo[key] = row[key];
            this.franchiseeInfo.storeManagerId = row.storeManagerId
          }
        }
      }
    },
    _submit() {
      this.$refs.addFranchiseeForm.validate((valid) => {
        if (this.franchiseeInfo.storeManagerId) {
          this.$api
              .storeManagerUpdateFranchisee(this.franchiseeInfo)
              .then((res) => {
                if (res != 0) {
                  this.$message.success('编辑成功！')
                  this.$emit('addStatus', 1)
                  this.dialogVisible = false
                } else {
                  return false
                }
              })
          return
        } else {
          this.$api.storeManagerAddFranchisee(this.franchiseeInfo).then((res) => {
            if (res == 1) {
              this.$message.success('校验通过，提交成功！')
              this.$emit('addStatus', 1)
              this.dialogVisible = false
            } else {
              return false
            }
          })
        }
      })
    },
    _cancel() {
      this.$refs.addFranchiseeForm.resetFields()
      this.dialogVisible = false
      // this.recordId = ''
    },
    // resetForm() {
    //   this.$refs.addFranchiseeForm.resetFields()
    //   this.recordId = ''
    // },
  },
}
</script>

<style scoped>
.titleT {
  width: 120px;
  height: 38px;
  background-color: #f5f7fa;
  color: #909399;
  text-align: center;
  line-height: 40px;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}

::v-deep .el-input__inner {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/deep/ .el-dialog__title {
  color: #fff;
}

/deep/ .el-dialog__header {
  /* background-color: #303e9d; */
  background-color: #303e9d;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/deep/ .el-radio__input.is-checked .el-radio__inner {
  border-color: #303e9d;
  background-color: #303e9d;
}

/deep/ .el-radio__input.is-checked + .el-radio__label {
  color: #303e9d;
}

/deep/ .el-radio__input.is-checked + .el-radio__label {
  color: #303e9d;
}

/deep/ .el-dialog .el-dialog__header {
  border-radius: 10px 10px 0 0;
}

/deep/ .el-dialog {
  border-radius: 10px !important;
}
</style>
